import React from 'react';
import { connect } from 'dva';
import { Layout, Row, Col, Icon, Badge, Avatar, Menu, Dropdown } from 'antd';
import styles from './Main.css'
const { Header } = Layout;
class MainHeader extends React.Component {
  render() {
    const { collapsed, dispatch } = this.props
    const { userinfo } = this.props.userinfo
    const menu = (
      <Menu>
        <Menu.Item key="0">
          <a onClick={() => this.props.dispatch({
            type: 'userinfo/signOut',
            payload: 'goPersonal'
          })}>个人中心</a>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="2">
          <a onClick={() => this.props.dispatch({
            type: 'userinfo/signOut',
            payload: 'signOut'
          })}>退出登录</a>
        </Menu.Item>
      </Menu>
    );
    return (
      <Header className={styles.mainHeader} style={collapsed ? { width: 'calc(100% - 80px)' } : {}}>
        <Row type='flex' align='middle' justify="space-between">
          <Col span={1}>
            <Icon
              className={styles.trigger}
              type={collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={() => dispatch({ type: 'theme/toggle', collapsed: !collapsed })}
            />
          </Col>
          <Col span={4}>
            <Row type='flex' align='middle' justify='space-around'>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Badge dot>
                  <Icon style={{ fontSize: 24, color: '#b2b0c7' }} type="bell" />
                </Badge>
              </div>
              <div style={{lineHeight:'initial'}}>
                <Dropdown overlay={menu}>
                  <div>
                    <Avatar style={{ marginRight: 9 }} shape="square" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" />
                    <span style={{ color: 'rgb(153, 153, 153)', marginRight: '4' }}>Hi,</span>
                    <span>{userinfo.name}</span>
                  </div>
                </Dropdown>
              </div>
            </Row>
          </Col>
        </Row>
      </Header>
    );
  }
}

const mapStateToProps = state => {
  return {
    userinfo: state.userinfo
  }
}

export default connect(mapStateToProps)(MainHeader);